<template>
  <div class="pb-5">
    <div class="py-3"><h3 class="text-lg font-bold">为你推荐</h3></div>
    <div class="bg-white flex" style="height: 95px">
      <div
        class="cursor-pointer flex border-rounded border-1 mr-3"
        style="height: 95px; width: 26px"
        @click="handleArrowPrev"
        v-show="showArrowPrev"
      >
        <el-icon style="margin: auto"><ArrowLeft /></el-icon>
      </div>
      <div class="flex-1 overflow-hidden" ref="specScrollBox">
        <ul
          :style="specStyles"
          class="transition-all duration-300 pos-relative flex"
          ref="specListBox"
        >
          <li
            v-for="(item, index) in recommentList"
            :key="`preview-${index}`"
            class="p-1 text-center flex mr-3"
          >
            <div
              class="cursor-pointer border-rounded overflow-hidden border-1 boredr-gray-300 hover:border-red"
              style="line-height: 0; width: 85px; height: 85px; min-width: 85px"
            >
              <el-image :src="item.thumbnail" fit="fill" />
            </div>
            <div class="pl-2 text-left" style="width: 125px">
              <h6 class="text-sm text-gray-500 line-clamp-2">
                {{ index }}-{{ item.name }}
              </h6>
              <span>
                <Price :price="item.price" />
              </span>

              <div class="flex justify-end">
                <span
                  style="width: 25px; height: 25px"
                  class="bg-red-500 flex items-center justify-center border-rounded-2xl cursor-pointer"
                >
                  <el-icon color="white"><Plus /> </el-icon>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="cursor-pointer flex border-rounded border-1 ml-3"
        style="height: 95px; width: 26px"
        @click="handleArrowNext"
        v-show="showArrowNext"
      >
        <el-icon style="margin: auto"><ArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch, onMounted, nextTick } from "vue";
import { ArrowLeft, ArrowRight, CaretRight, Plus } from "@element-plus/icons-vue";
import type { RecommendItem } from "@/api/types/product";
import { generateRecomments } from "@/mock/data/product";
import Price from "@/components/common/Price.vue";

const StepNumber = 460;

const recommentList = ref<RecommendItem[]>([]);
const specScrollBox = ref<HTMLDivElement | null>(null);
const specListBox = ref<HTMLDivElement | null>(null);
const scrollBoxWidth = ref(0);
const listBoxWidth = ref(0);
const translateX = ref(0);

const showArrowPrev = computed(() => translateX.value < 0);
const showArrowNext = computed(() => translateX.value > -listBoxWidth.value + scrollBoxWidth.value);
const specStyles = computed(() => {
  return {
    transform: `translateX(${translateX.value}px)`,
  };
});
const handleArrowPrev = () => {  
  translateX.value = Math.min(0, translateX.value + StepNumber);
};
const handleArrowNext = () => {
  const targetX=translateX.value - StepNumber;
  translateX.value = Math.max(-listBoxWidth.value + scrollBoxWidth.value-50,targetX);
};

onMounted(async () => {
  recommentList.value = await generateRecomments(10);
  nextTick(() => {
    if (!specScrollBox.value || !specListBox.value) return;
    scrollBoxWidth.value = specScrollBox.value?.clientWidth || 0;
    listBoxWidth.value = specListBox.value?.scrollWidth || 0;
    console.log("scrollBoxWidth", scrollBoxWidth.value, listBoxWidth.value);
  });
});
</script>
